<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  let obj = {
    name: '张三',
    sex: '男'
  }
  sessionStorage.setItem('token', 123);
  sessionStorage.setItem('obj', JSON.stringify(obj));
  window.addEventListener('storage', function (event) {
    /* 1、目的：触发原页面在localStorage存一下sessionStorage，向其它的tab的页面发送一个信号，触发下面那个key='sessionStorage'的分支
        2、解释：在原来的页面就会触发事件，将sessionStorage存入localStorage，为了触发storage监听，然后清除localStorage，不留痕迹，也就一瞬间的事情
    */
    if (event.key == 'getSessionStorage') {
      // 已存在的标签页会收到这个事件
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');
    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      /*
      1、目的：在tabs页面中通过上面的触发，接受sessionStorage的参数
      2、解释：storage监听到key = sessionStorage的取出存入的sessionStorage，循环存入新的标签
      */
      // 新开启的标签页会收到这个事件
      var data = JSON.parse(event.newValue);
      for (let key in data) {
        sessionStorage.setItem(key, data[key]);
      }
    }
    console.log('Storage-----' + sessionStorage.getItem('token'))
    console.log('Storage-----' + JSON.parse(sessionStorage.getItem('obj')))
  });
</script>
</body>
</html>